<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前台界面</title>
    <!-- 引入element-ui样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css">

    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
    <!--轮播走马灯-->
    <style>
        .el-carousel__item h3 {
            color: #475669;
            font-size: 18px;
            opacity: 0.75;
            line-height: 300px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
        .el-carousel__container{
            height: 500px;
        }
    </style>

    <style>
        .button:active{
            color:greenyellow;
        }
        .button:focus{
            color:red;
        }


    </style>

</head>
<body>
<div id="app">

    <!--1.导航栏-->
    <div style="z-index: 999;position:fixed;width: 100%">
        <el-menu
                class="el-menu-demo"
                mode="horizontal"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item index="1" @click="url(1)" style="margin-left: 200px">首页</el-menu-item>
            <el-menu-item index="3" @click="url(3)">录用结果</el-menu-item>
            <el-menu-item index="4" @click="url(4)">工资详情|反馈信息</el-menu-item>
            <el-menu-item index="5" @click="url(5)">修改个人信息</el-menu-item>

            <el-submenu index="6"  style="margin-left: 400px">
                <template slot="title"><i class="el-icon-user"></i></template>
                <el-menu-item index="6-2" @click="url(6)">退出登录</el-menu-item>
            </el-submenu>


        </el-menu>
    </div>

<!--   注： 这个盒子的作用是把轮播图给顶到下面去，避免导航栏position的fixed属性将轮播图给覆盖-->
    <div style="width: 100%;height:58px "></div>
    <!--2.轮播图-->
   <div>
       <template>
           <el-carousel indicator-position="outside">
               <el-carousel-item v-for="item in options" :key="item">
                   <div style="position: absolute;
                        width: 1500px;
                        height: 100px;
                        background: rgba(0, 0, .2, .5);margin: 400px 0 0 0">
                       <span style="color: red;font-size: 20px">{{ item.resume }}</span>
                   </div>
                   <img style="width: auto; height: 2px; border:none;cursor: pointer;"
                        :preview-src-list=" `/files/downloadFile?name=${item.image}` "
                        :src="getImage(item.image)"
                   />
                   <img @click="toBroadcast2(item)" style=" cursor:pointer;width: 1500px;height: 500px;margin-top: -20px" :src="imageUrl1" class="image">

               </el-carousel-item>
           </el-carousel>
       </template>
   </div>

    <!--3.推荐岗位内容-->
    <div style=" display: inline-block; width: 1400px;height:auto;border: 1px solid #ccc;padding:8px;  margin-left: 45px; ">
        <!--3.1推荐岗位-->
        <div style="margin:50px 0 0 140px;width: 1200px;height: 1000px;">
            <h1 style="margin: -20px 0 50px 480px">推荐岗位</h1>
            <el-row>
                <el-col :span="8"  v-for="item in items1" >
                    <div  style="overflow:hidden; margin-bottom: 20px;width: 330px;height: 350px;background-color: whitesmoke">

                        <img style="width: auto; height: 2px; border:none;cursor: pointer;"
                             :preview-src-list=" `/files/downloadFile?name=${item.image}` "
                             :src="getImage(item.image)"
                        />
                        <img style="width: 330px;height: 250px;margin-top: -20px" :src="imageUrl1" class="image">

                        <h3 style="margin:0 0 0 10px">岗位名称:{{item.jobName}}</h3>
                        <p style="margin:0 0 0 10px">薪资：{{item.salary}}元/小时</p>

                        <el-button @click="toBroadcast(item)" style="float: right;margin: 5px 10px 0 0" type="success">点击详情</el-button>
                        <p style="margin:-40px 0 0 190px" v-if="item.statusRecruit=='true'">招聘状态：招聘中</p>
                        <p style="margin:-40px 0 0 180px" v-else-if="item.statusRecruit">招聘状态：招聘结束</p>

                    </div>
                </el-col>
            </el-row>
        </div>

    </div>

    <!--4.分类1内容-->
    <div   :span="24"  v-for="item in items2" style=" display: inline-block; width: 1400px;height:auto;border: 1px solid #ccc;padding:8px;  margin-left: 45px; ">
        <div style="margin:50px 0 0 140px;width: 1200px;height: 1000px;">
            <h1 style="margin: -20px 0 50px 480px">{{item.jobType}}</h1>
            <el-row>
                <el-col :span="8"  v-for="item2 in item.postList" >
                    <div  style="overflow:hidden; margin-bottom: 20px;width: 330px;height: 350px;background-color: whitesmoke">

                        <img style="width: auto; height: 2px; border:none;cursor: pointer;"
                             :preview-src-list=" `/files/downloadFile?name=${item2.image}` "
                             :src="getImage(item2.image)"
                        />
                        <img style="width: 330px;height: 250px;margin-top: -20px" :src="imageUrl1" class="image">

                        <h3 style="margin:0 0 0 10px">岗位名称:{{item2.jobName}}</h3>
                        <p style="margin:0 0 0 10px">薪资：{{item2.salary}}元/小时</p>
                        <el-button @click="toBroadcast(item2)" style="float: right;margin: 5px 10px 0 0" type="success">点击详情</el-button>
                        <p style="margin:-40px 0 0 190px" v-if="item2.statusRecruit=='true'">招聘状态：招聘中</p>
                        <p style="margin:-40px 0 0 180px" v-else-if="item2.statusRecruit">招聘状态：招聘结束</p>

                    </div>
                </el-col>
            </el-row>
        </div>
    </div>


    <!--4.公告内容弹框-->
    <el-dialog :title="title" style="height: 800px"  :visible.sync="dialog_add">
        <h1 style="margin: 0 0 20px 270px"> {{formData.title}}</h1>
        <div style="width: 706px;height: 2px;background-color: black"></div>
        <div style="height: 500px;width: 100%;margin-top: 50px">
            {{formData.resume}}
            {{formData.content}}
        </div>
    </el-dialog>


</div>


<script src="../../plugins/vue/vue.js"></script>

<!-- 引入element-ui组件库 -->
<script src="../../plugins/element-ui/index.js"></script>

<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>

<script>
    new Vue({
        el:'#app',    //element
        data:{

            userInfo:{},

            items1:[],
            items2:[],
            options:[],

            //公告弹框
            dialog_add:false,
            //公告弹框内容封装
            formData:{}


        },
        created() {
            const userInfo = window.localStorage.getItem('user')
            if (userInfo) {
                this.userInfo = JSON.parse(userInfo)
            }
            console.log("userInfo2:::"+userInfo)

            this.getAll()

        },
        methods:{
            url(code){
                if (code==1){
                    window.location.href='index.html';
                }else  if (code==2){
                    window.location.href='list/teleplay.html';
                }else  if (code==3){
                    window.location.href='list/applicationResult.html';
                }else  if (code==4){
                    window.location.href='list/salaryDetails.html';
                }else  if (code==5){
                    window.location.href='list/updateMyself.html';
                }else  if (code==6){
                    localStorage.setItem('student',null)
                    window.location.href='../Login/StudentLogin.html';
                }
            },

            getAll(){

                //推荐
                axios.get("/posts/getAllPostByIsRecommend").then((res)=>{
                    console.log("res1:")
                    console.log(res)
                    this.items1=res.data.data
                })
                //分类岗位
                axios.get("/posts/getAllPostByjobType").then((res)=>{
                    this.items2=res.data.data
                    console.log("items2:")
                    console.log(this.items2)
                })

                //轮播图
                axios.get("/announcements/getAllAnnouncement").then((res)=>{
                    this.options=res.data.data
                })


            },

            toBroadcast(row){
                window.location.href='list/postDetails.html?id='+row.id;
            },
            toBroadcast2(row){
                this.formData=row
               this.dialog_add=true

            },
            getImage(image) {
                this.imageUrl1= `/files/downloadFile?name=${image}`
            },

        }

    })
</script>
</body>
</html>
